<template>
  <div class="content">
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item title="计费规则与优惠说明" name="2">
        乘车费根据当地交通公司的统一规则制定，乘车码暂时无法享受公交卡同等折扣，但会有优惠活动推出，您可以关注最新优惠活动及折扣信息。
      </van-collapse-item>
      <van-collapse-item title="如何刷码乘车?" name="3">
        将乘车码靠近公交的刷码设备进行刷码后，设备会发出“验票成功”(或其他提示音)提示您刷码成功，刷码设备的屏幕也会有相应的提示。刷码成功即可乘车，无需等候手机"支付成功”页面出现。
      </van-collapse-item>
      <van-collapse-item title="为何会出现延迟扣费情况?" name="4">
        乘车码是用户先乘车，后付费，延迟扣费属于正常现象。公交机具有时候会因为网络信号问题导致数据延迟上送,从而出现较长时间段的延迟扣费，您可以在乘车记录中查看相应的行程记录。
      </van-collapse-item>
      <van-collapse-item title="请上下车或进出站均使用我的南京APP乘车码" name="5">
        请您确保每次行程上下车或者进出站均使用我的南京APP乘车码，不要混用我的南京APP乘车码和其他APP乘车码或其他支付方式，以免出现单边行程强制扣费给您带来资金损失。
      </van-collapse-item>
      <van-collapse-item title="“有一笔待处理的乘车记录”如何处理?" name="6">
        若我的南京客户端服务提醒中出现“你有一笔待处理的乘车记录"，您需前往地铁站厅客服中心处，服务人员会按照相关票务规则更新您未结束的行程，现场处理。
      </van-collapse-item>
      <van-collapse-item title="电子地铁卡需要充值吗?" name="9">
        目前，电子地铁卡无需充值即可使用，我的南京app会在您出站后根据乘车记录自动扣取车费。
      </van-collapse-item>
      <van-collapse-item title="乘车码对手机型号有限制吗?" name="10">
        在安装了我的南京客户端的智能手机均可以使用乘车码服务，为确保您使用的流畅性，请确认您的我的南京客户端已升级至最新版本。
      </van-collapse-item>
      <van-collapse-item title="手机没电如何处理?" name="11">
        如您在乘坐地铁过程中手机没电或丢失，需在出站时前往地铁站厅客，服中心处现场处理。
      </van-collapse-item>
      <van-collapse-item title="如何找到乘车码?" name="13">
        如您刷码过闸时，闸机显示"非本系统票”或“无效二维码”，请先尝试手动刷新二维码，如仍无法进站，请前往地铁站厅客服中心处现场处理。
      </van-collapse-item> 
      <van-collapse-item title="电子地铁卡如何申请关闭?" name="14">
        如您需关闭服务，关闭入口位于“南京地铁乘车码-更多服务-关闭服务”，请根据页面提示操作。如仍需要使用乘车码，您可以在乘车码页面选择重新开启服务。
      </van-collapse-item>
      <van-button style="width:100%;background-color:#fff;color:#1876ff" @click="isios==false?showTell():callIos(999999)">
        <p style="text-align:left;">
          如果上方问题没帮到您，请点击拔打客服电话
        </p>
      </van-button>
    </van-collapse>
     <van-popup
        class="popup showtell"
        v-model="isshowtell"
        round
        position="bottom"
        :style="{ height: '16%' }"
      >
        <!-- 电话 -->
        <van-button type="primary" class="photo" v-if="isios==false" @click="callPhone(12345)">
          <img src="../assets/tellicon.png" class="bgName" alt />
          <span>呼叫 （025）6738 2908</span>
        </van-button>
        <van-button type="primary" @click="isshowtell=false">取消</van-button>
      </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
       isshowtell: false,
       isios: false,
    };
  },
  created() {
    // 判断当前设备为安卓还是ios
    const u = navigator.userAgent;
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
      console.log("ios");
      this.isios = true;
      return "ios";
    } else {
      console.log("andriod");
      this.isios = false;
      return "andriod";
    }
  },
  methods: {
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
    },
    callIos(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
    },
    showTell() {
      this.isshowtell = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  height: 100vh;
  background-color: #f2f2f2;
  box-sizing: border-box;
  padding: 7px 12px;
  .van-button__text{
    width: 100%;
  }
  .showtell {
      font-size: 16px;
      background-color: transparent;
      padding: 16px;
      font-weight: 500;
      button {
        display: block;
        border-radius: 10px;
        background-color: #fff;
        width: 92%;
        color: #207cff;
        padding: 0 25px;
        img {
          width: 17px;
          height: 21px;
          margin-right: 13px;
        }
      }
      .photo {
        margin-bottom: 16px;
        .van-button__content {
          justify-content: flex-start;
          .van-button__text {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
}
</style>